<template>
  <view class="container">
 
    
    <!-- 数据内容区域 -->
    <view class="data-container">
      <!-- 卡片容器 -->
      <view class="data-card">
        <view class="card-header">
          <text class="card-title">预测信息</text>
          <view class="card-divider"></view>
        </view>
        
        <view class="data-item">
          <text class="data-label">预测时间:</text>
          <text class="data-value">{{ predictionTime || '暂无数据' }}</text>
        </view>
      </view>
      
      <!-- 原始数据卡片 -->
      <scroll-view class="data-card data-card--second" scroll-y="true" style="height: 50vh;">
        <view class="card-header">
          <text class="card-title">原始预测数据</text>
          <view class="card-divider">{{remark}}</view>
        </view>
        
        <view class="remark-container">
          <view 
            class="remark-content" 
          
          >
            <!-- 数据为空时显示 -->
            <template v-if="!remarkFormatted">
              <text class="empty-text">暂无原始预测数据</text>
            </template>
          </view>
        </view>
      </scroll-view>
    </view>
    
    <!-- 加载状态 -->
    <view v-if="loading" class="loading-overlay">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { http } from '../../../../utils/requestUtil';

// 状态管理
const predictionTime = ref('')
const remark = ref('')
const remarkFormatted = ref('')
const loading = ref(true) // 新增加载状态

onMounted(async()=>{
  try {
    loading.value = true // 开始加载
    const res = await http.get("/trainScript/predict/getInfo")
    console.log('原始数据:', res.data)
    
    // 提取预测时间
    predictionTime.value = res.data.prediction_time || ''
    
    // 提取并格式化remark字段
    if (res.data.remark) {
      try {
        const remarkObj = JSON.parse(res.data.remark)
        remark.value = remarkObj.text || ''
      } catch (e) {
        remark.value = res.data.remark
      }
      remarkFormatted.value = remark.value.replace(/\n/g, '<br>')
    }
  } catch (error) {
    console.error('获取数据失败:', error)
    remarkFormatted.value = '数据加载失败，请稍后重试'
  } finally {
    loading.value = false // 结束加载
  }
})
</script>

<style scoped>
/* 基础样式 */
.container {
  min-height: 100vh;
  background-color: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 导航栏样式 */
.custom-nav-bar {
  background-color: #3498db;
  padding-top: 20px; /* 适配状态栏 */
}

.nav-content {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

.nav-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 500;
}

/* 数据容器 */
.data-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 数据卡片 */
.data-card {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.data-card:hover {
  transform: translateY(-2px);
}

.data-card--second {
  margin-bottom: 20px;
}

/* 卡片头部 */
.card-header {
  padding: 16px;
}

.card-title {
  color: #333333;
  font-size: 16px;
  font-weight: 500;
}

.card-divider {
  height: 1px;
  background-color: #f0f2f5;
  margin-top: 12px;
}

/* 数据项 */
.data-item {
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-bottom: 1px solid #f0f2f5;
}

.data-label {
  color: #666666;
  font-size: 14px;
  flex-shrink: 0;
}

.data-value {
  color: #333333;
  font-size: 14px;
  flex-grow: 1;
  word-break: break-all;
}

/* 备注内容容器 */
.remark-container {
  padding: 16px;
}

.remark-content {
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap; /* 保留空白和换行 */
}

/* 空数据提示 */
.empty-text {
  color: #999999;
  font-size: 14px;
  display: block;
  padding: 20px 0;
  text-align: center;
}

/* 加载状态 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #e0e0e0;
  border-top-color: #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 12px;
}

.loading-text {
  color: #666666;
  font-size: 14px;
}

/* 动画定义 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 响应式调整 */
@media (min-width: 768px) {
  .data-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;
  }
  
  .nav-title {
    font-size: 20px;
  }
  
  .card-title {
    font-size: 18px;
  }
  
  .data-label,
  .data-value,
  .remark-content,
  .empty-text,
  .loading-text {
    font-size: 15px;
  }
}
</style>